<template>
  <li class="author-item cs fx-h-c">
    <img
      :src='msg.avatarUrl'
      alt=""
    />
    <div class="des">
      <div class="name-img fx-h-c">
        {{msg.author}}
        <img
          :src='msg.levelUrl'
          alt=""
        />
      </div>
      <div class="ofh des-word">{{msg.text}}</div>
    </div>
  </li>
</template>

<script>
export default {
  name: "AuthorItem",
  props: {
    msg: {
      type: Object,
      default: () => ({})
    }
  }
};
</script>

<style lang="scss" scoped>
.author-item {
  margin-bottom: 2rem;
  img {
    width: 4.5rem;
    height: 4.5rem;
    margin-right: 0.5rem;
    border-radius: 50%;
  }
  .des {
    .name-img {
      font-size: 1.4rem;
      img {
        width: 2rem;
        height: 2rem;
        margin-left: 0.3rem;
      }
    }
    .des-word {
      width: 15rem;
      font-size: 1.3rem;
      margin-top: 0.3rem;
      color: #909090;
    }
  }
  &:last-child {
      margin: 0;
  }
}
</style>